<template>
  <div class="main-container container-fluid container-limited page-holder">
    <users-settings-breadcrumb />
    <table v-loading="loading" class="padding oauth2-table">
      <tbody>
      <tr>
        <td class="flex align-items-center">
          <el-avatar :src="EduCoder" :size="20" class="m-r-5" />
          EduCoder
        </td>
        <td>
          <span class="link el-link--primary" @click="bindEduCoder">{{ educoder.label }}</span>
        </td>
      </tr>
      </tbody>
    </table>
    <el-dialog :title="unbindingTitle" :visible.sync="dialogVisible" width="350px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" autofocus />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="form.code" placeholder="请输入验证码">
            <send-code-btn
              slot="suffix"
              :phone="form.phone"
              class="m-r-10"
              @checkPhone="verifyPhone"
            />
          </el-input>
        </el-form-item>
        <div>
          <el-button type="primary" @click="unbinding" :loading="unbindingLoading">解除绑定</el-button>
          <el-button class="right" @click="closeDialog">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import UsersSettingsBreadcrumb from '@/views/users/settings/breadcrumb';
import EduCoderLogo from '@/assets/EduCoder.jpg';
import SendCodeBtn from '@/components/shared/SendCodeBtn';

export default {
  name: 'OAuth2', // 第三方账号绑定
  components: { UsersSettingsBreadcrumb, SendCodeBtn },
  data() {
    return {
      EduCoder: EduCoderLogo,
      loading: false,
      oauth2list: [],
      dialogVisible: false,
      form: {
        phone: '',
        code: '',
      },
      rules: {
        phone: [{ validator: this.$va.phone, trigger: 'none' }],
        code: [{ validator: this.$va.code, trigger: 'none' }],
      },
      unbindingId: undefined,
      unbindingTitle: undefined,
      unbindingLoading: false,
    };
  },
  computed: {
    educoder() {
      const state = this.oauth2list.filter(item => item.type === 'educoder')[0];
      if (state && state.id) return { id: state.id, label: '解绑' };
      return { label: '绑定' };
    },
  },
  created() { this.loadOAuth2(); },
  methods: {
    // 获取绑定信息
    loadOAuth2() {
      this.loading = true;
      this.$api.oauth.index()
        .then((res) => { this.oauth2list = res.data; })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 绑定与解绑
    bindEduCoder() {
      if (this.educoder.id) {
        this.unbindingId = this.educoder.id;
        this.unbindingTitle = '解除EduCoder绑定';
        this.dialogVisible = true;
      } else {
        this.$api.users.EduCoderSignIn()
          .then((res) => {
            const redirect = this.$route.query.redirect;
            if (redirect) localStorage.setItem('otherSignIn', redirect); // 保存跳转页面
            window.location.href = res.data.url;
          })
          .catch(() => {});
      }
    },
    // 验证解绑
    unbinding() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.unbindingLoading = true;
          this.$api.oauth.destroy({
            id: this.unbindingId,
            phone: this.form.phone,
            code: this.form.code,
          }).then(() => {
            this.$message.success('解绑成功');
            this.loadOAuth2();
            this.closeDialog();
          }).catch(() => {})
            .then(() => { this.unbindingLoading = false; });
        }
      });
    },
    // 触发验证手机号
    verifyPhone() { this.$refs.signInForm.validateField('phone'); },
    // 关闭弹出框
    closeDialog() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
table.oauth2-table {

  tbody tr td {
    min-width: 10rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
</style>
